<template>
    <div class="bar" v-if="detailList.teacher">
        <img :src="detailList.teacher.avatar" alt="">
        <span> {{ detailList.teacher.real_name }} -{{ detailList.teacher.introduction}}</span>
        <div class="gz" v-if="detailList.flag == 2" @click="collectFn(detailList.teacher.id)">取消关注</div>
        <div class="gz" v-if="detailList.flag == 0 ||detailList.flag == 1" @click="collectFn(detailList.teacher.id)">关注</div>
    </div>
</template>

<script>
import { getTearchCollect } from "../../http/teach"
export default {
    props: ['detailList'],
    created(){
    },
    methods:{
        async collectFn(id){
            let res = await getTearchCollect(id)
            console.log(res);
            this.$emit("guanzhu",res)
        }
    }
}
</script>

<style lang="scss" scoped>
.bar{
    width: 90vw;
    margin-left: 5vw;
    background-color: #fff;
    line-height: 120px;
    position: absolute;
    top: 55px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    color: #999;
    border-radius: 10px;
    img{
        width: 70px;
        height:70px;
        border-radius: 50%;
        vertical-align: middle;
    }
    span{
    margin-right: 140px;
    }
    .gz{
        width: 100px;
        line-height: 30px;
        text-align: center;
        border-radius: 20px;
        color: orange;
        background-color: #ebefff;
    }
}
</style>
